<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row class="card" justify="space-between">
      <t-col v-for="(item,index) in panelList" :key="index" :span="2">
        <div class="header"><div class="title">{{item.title}}</div></div>
        <div class="header">
          <t-link  @click="toPath(item)" :style="{ fontSize: `36px`}" theme="primary" hover="color">{{ item.number }}</t-link>
        </div>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="标准类别（已发布）" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view @click="(data)=>{clickToIndex(data,'standardCategory')}" :chartOption="chartOpt3" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <!-- <t-col :xs="12" :xl="4">
        <t-card title="标准性质" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view  @click="(data)=>{clickToIndex(data,'standardProperty')}" :chartOption="chartOpt5" :autoResize="false" height="326px"/>
        </t-card>
      </t-col> -->
      <t-col :xs="12" :xl="6">
        <t-card title="标准体系（已发布）" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view  @click="(data)=>{clickToIndex(data,'systemId')}" :chartOption="chartOpt7" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <!-- <t-row :gutter="[16, 16]">
       <t-col :xs="12" :xl="6">
        <t-card title="制定或修改" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view  @click="(data)=>{clickToIndex(data,'formulateType')}" :chartOption="chartOpt4" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
       <t-col :xs="12" :xl="6">
        <t-card title="申报数量对比" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view @click="clickToApply" :chartOption="chartOpt8" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row> -->
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card  title="标准数量"  :subtitle="currentMonth" class="dashboard-rank-card">
          <t-tabs :value="value"  @change="annualGraph">
            <t-tab-panel :value="1" label="按申报时间">
              <chart-view @click="(data)=>{jumpToIndex({'createTime': data.name})}" :chartOption="chartOpt6" :autoResize="false" height="326px"/>
            </t-tab-panel>
            <t-tab-panel :value="2" label="按完成时间 ">
              <chart-view @click="(data)=>{jumpToIndex({'completeDate': data.name})}" :chartOption="chartOpt6" :autoResize="false" height="326px"/>
            </t-tab-panel>
            <t-tab-panel :value="3" label="按发布时间">
              <chart-view @click="(data)=>{jumpToIndex({'publishDate': data.name})}" :chartOption="chartOpt6" :autoResize="false" height="326px"/>
            </t-tab-panel>
            <t-tab-panel :value="4" label="按实施时间">
              <chart-view @click="(data)=>{jumpToIndex({'implDate': data.name})}" :chartOption="chartOpt6" :autoResize="false" height="326px"/>
            </t-tab-panel>
          </t-tabs>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card  title="牵头单位排名（已发布）" class="dashboard-rank-card">
          <t-table hover :data="deptRankData" :columns="deptRankColumns" max-height="360" rowKey="departmentId">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>

            <template #projectCount="{ row }">
              <t-tag @click="jumpToIndex({'deptName': row.deptName})" class="cursor-pointer" theme="success" variant="light">{{ row.projectCount }}</t-tag>
            </template>
          </t-table>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>
<script lang="jsx">
export default {
  name: "home",
  dicts: [],
  components: {
  },
  data() {
    return {
      value:1,
      chartOpt6: {},
      site_tag: import.meta.env.VITE_SITE_TAG,
      resizeTime: 1,
      currentMonth: "",
      declarationsNum: 0,
      releaseNum: 0,
      implementNum: 0,
      chartOpt: {},
      chartOpt2: {},
      chartOpt3: {},
      chartOpt4: {},
      chartOpt5: {},
      chartOpt7: {},
      chartOpt8:{},
      dialog: {
        open_project_detail: false,
        open_approve_list: false,
        header: "",
        objId: 0
      },
      panelList: [],
      deptRankData: [],
      deptRankColumns: [
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "projectCount",
          title: "数量",
          align: "center",
        },
      ],
      projectData: [],
      projectColumns: [
        {
          colKey: "projectName",
          title: "项目名称",
          align: "center",
          ellipsisTitle: false,
          width: 300,
        },
        {
          colKey: 'declareDeptName',
          title: '申报单位',
          align: 'center',
          width: 180
        },
        {
          colKey: 'declareDate',
          title: '申报日期',
          align: 'center',
          width: 120
        },
        {
          colKey: "projectStatus",
          title: "项目状态",
          align: "center",
          width: 220,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectCategory: '',
        projectName: '',
        projectType: '',
        subjectClassification: '',
        dateRange: []
      },
    }
  },
  created() {
    this.getStageCount();
    this.getByStandardCategory();
    this.getByFormulateType()
    this.getByStandardProperty()
    this.getMapByYear(1)
    this.getDraftUnitRanking()
    this.getByStandardSystem()
    this.getStandardDeclareCount()
  },
  methods: {
    getDraftUnitRanking(){
      this.$api.bzh.home.getDraftUnitRanking().then(response => {
        this.deptRankData = response.data
        console.log(response.data)
      })
    },
    getMapByYear(index){
      this.$api.bzh.home.getMapByYear(index).then(response => {
        const resData = response.data
        const xAxis = []
        const yAxis = []
        resData.forEach(item=>{
          yAxis.push(item.count)
          xAxis.push(item.year)
        })
        // if(index !== 3) {
        //   this.chartOpt6 = this.$eChartFn.getLineChart(xAxis.reverse(),yAxis.reverse());
        // }else {
        //   this.chartOpt6 = this.$eChartFn.getBarChart(xAxis.reverse(),yAxis.reverse());
        // }
        this.chartOpt6 = this.$eChartFn.getBarChart(xAxis.reverse(),yAxis.reverse());
      })
    },
    annualGraph(nowIndex) {
      this.value = nowIndex
      this.getMapByYear(nowIndex)
    },
    clickToIndex(data,param){
      const query = {}
      query[param] = data.data.lableValue
      if (['standardCategory', 'systemId'].includes(param)) {
        query.queryType = '3'
      }
      this.$router.push({
        path:'/bzh/standard/standard-index',
        query
      })
    },
    jumpToIndex(query) {
      this.$router.push({
        path:'/bzh/standard/standard-index',
        query
      })
    },
    clickToApply(){
      this.$router.push({
        path:'/bzh/apply/apply-index',
      })
    },
    toPath(item) {
      this.$router.push({
        path: item.path,
        query: item.query
      });
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', {'dashboard-rank__cell--top': index < 3}];
    },
    getByStandardCategory() {
      this.$api.bzh.home.getByStandardCategory().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByFormulateType() {
      this.$api.bzh.home.getByFormulateType().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt4 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByStandardProperty() {
      this.$api.bzh.home.getByStandardProperty().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt5 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByStandardSystem() {
      this.$api.bzh.home.getByStandardSystem().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt7 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getStandardDeclareCount() {
      this.$api.bzh.home.getStandardDeclareCount().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt8 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    async getStageCount() {
      // this.declarationsNum = (await this.$api.bzh.home.getStageCount("1")).data.count
      // this.releaseNum = (await this.$api.bzh.home.getStageCount("2")).data.count
      // this.implementNum = (await this.$api.bzh.home.getStageCount("3")).data.count

      this.$api.bzh.home.getPhaseCount().then(res=>{
        this.panelList = [
          {
            title: '总数',
            number: res.data.allCount,
            path: '/bzh/standard/standard-index',
            query: {
              standardStatusList: ['2', '4', '5', '7', '8', '10', '12', '13', '15', '16', '18', '20', '21', '23', '25', '26', '28', '29', '31', '33', '35', '36', '38', '39', '41','43', '44']
            }
          },
          {
            title: '计划阶段',
            number: res.data.jhCount,
            path: '/bzh/standard/standard-index',
            query: {
              queryType: 1,
              standardStatusList: ['2', '4', '5', '7', '8', '10', '12', '13', '15', '16', '18', '20', '21', '23', '25', '26', '28', '29', '31']
            }
          },
          {
            title: '报批阶段',
            number: res.data.bpCount,
            path: '/bzh/standard/standard-index',
            query: {
              queryType: 2,
              standardStatusList: ['33', '35', '36', '38', '39', '41']
            }
          },
          {
            title: '已发布',
            number: res.data.djCount,
            path: '/bzh/standard/standard-index',
            query: {
              queryType: 3,
              standardStatusList: ['43', '44']
            }
          },
          {
            title: '已宣贯',
            number: res.data.xgCount,
            path: '/bzh/standard/standard-index',
            query: {
              queryType: 4,
              standardStatusList: ['46']
            }
          },
          // {
          //   title: '报批表个数',
          //   number: res.data.bpCount,
          //   path: '/bzh/submit/submit-index',
          // },
          // {
          //   title: '已登记个数',
          //   number: res.data.djCount,
          //   path: '/bzh/standard/standard-index',
          //   query: {
          //     queryType : 3
          //   }
          // },
        ]
      }).catch((e) => {
        this.$message.error(e.toString());
      });

    }
  }
}
</script>

<style lang="less" scoped>
.card {
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .title {
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card {
  height: 100%;
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>
